<template>
  <div>
    <div id="lineChart"></div>
  </div>
</template>
<script>
const echarts = require('echarts/lib/echarts');
require('echarts/lib/component/title');
require('echarts/lib/component/toolbox');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/grid');
require('echarts/lib/component/legend');
require('echarts/lib/chart/line');
export default {
  data() {
    return {
      name: "张三",
      myChart: null
    };
  },
  mounted() {
    let chartDom = document.getElementById('lineChart');
    console.log(chartDom);
    this.myChart = echarts.init(chartDom);
    let option;

    option = {
      title: {
        text: 'Stacked Line'
      },
      tooltip: {
        trigger: 'axis',
        formatter: function (params) {
          let htmlStr = '';
          for(let i=0;i<params.length;i++){
            let param = params[i];
            let xName = '2021-11-18';//x轴的名称
            let seriesName = param.seriesName;//图例名称
            let value = param.value;//y轴值
            let color = param.color;//图例颜色

            if(i===0){
              htmlStr += xName + '<br/>';//x轴的名称
            }
            htmlStr +='<div>';
            //为了保证和原来的效果一样，这里自己实现了一个点的效果
            htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';
            // 文本颜色设置如果想设置文本颜色
            //htmlStr += '<span style="color:'+color+'">';
            //圆点后面显示的文本
            htmlStr += seriesName + '：' + value;
            htmlStr += '</div>';
          }
          return htmlStr;
        },
        // backgroundColor: 'rgba(150,150,150,0.7)',
        borderWidth: 0,
        padding: [
          5,  // 上
          110, // 右
          5,  // 下
          10, // 左
        ]
      },
      legend: {
        // show: true,
        type: 'plain',
        selectedMode: false,
        bottom: 0,
        data: [{name: '登录总数', icon: 'circle'}, {name: 'pc端', icon: 'circle'}, {name: '智慧终端', icon: 'circle'}, {name: 'APP+企业微信手机端', icon: 'circle'}]
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '13%',
        containLabel: true
      },
      toolbox: {
        show: false,
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        axisLabel: {
          interval: 0,
          rotate: 45
        },
        data: ['0:00-7:00', '7:00-8:00', '8:00-9:00', '9:00-10：00', '10:00-11:00', '11:00-12:00', '12:00-13:00', '13:00-14:00', '14:00-15:00', '15:00-16:00', '16:00-17:00', '17:00-18:00', '18:00-19:00', '19:00-20:00', '20:00-21:00', '21:00-22:00', '22:00-00:00']
      },
      yAxis: {
        type: 'value',
        axisLine: {
          show: true
        },
        axisTick: {
          show: true
        }
      },
      series: [
        {
          name: '登录总数',
          type: 'line',
          data: [20, 10, 25, 71, 28, 10, 30, 90, 10, 55, 90, 21, 89, 22, 33, 10, 10]
        },
        {
          name: 'pc端',
          type: 'line',
          data: [2, 4, 2, 7, 8, 10, 44, 9, 10, 55, 90, 21, 89, 22, 33, 10, 10]
        },
        {
          name: '智慧终端',
          type: 'line',
          data: [8, 4, 2, 8, 21, 10, 4, 9, 10, 55, 90, 21, 89, 22, 33, 10, 10]
        },
        {
          name: 'APP+企业微信手机端',
          type: 'line',
          data: [10, 2, 2, 50, 8, 10, 44, 90, 10, 55, 90, 21, 89, 22, 33, 10, 10]
        }
      ]
    };

    option && this.myChart.setOption(option);
    window.addEventListener('resize', this.resizeHandler);
  },
  methods: {
    resizeHandler () {
      this.myChart.resize();
    }
  }
};
</script>
<style>
#lineChart {
  width: 100%;
  height: 400px;
}
</style>
